<template>
  <div>
    <div class="box">
      <div class="zhuce">新用户注册</div>
      <p>很高兴您将成为商城的会员(注册只需要一步)</p>
      <van-form validate-first @failed="onFailed">
  <!-- 通过 pattern 进行正则校验 -->
  <van-field
    v-model="value1"
    name="pattern"
    placeholder="手机号码"
    :rules="[{ pattern, message: '请输入正确的手机号码' }]"
  />
  <!-- 通过 validator 进行函数校验 -->
  <van-field
    v-model="value2"
    name="validator"
    placeholder="密码"
    :rules="[{ validator, message: '请输入正确的密码' }]"
  />
  <van-field
    v-model="value3"
    name="validator"
    placeholder="确认密码"
    :rules="[{ validator, message: '两次密码输入不一致' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="gotologin()">
      立即注册
    </van-button>
  </div>
</van-form>
<router-link to="/login">已有账号？立即登录</router-link>
    </div>
    
  </div>
</template>
<script>
export default {
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      pattern: /\d{6}/,
    };
  },
  methods: {
    validator(val) {
      return /1\d{10}/.test(val);
      let validatorval = validator.val;
      let validatorval1 = validator.val1;
      if (validatorval !== validatorval1) {
        alert("两次密码不一样");
      } else {
        return false;
      }
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    gotologin(){
        this.$router.push("/login")
    }
  },
};
</script>
<style scoped>
.box {
  width: 90%;
  height: 110vh;
  border: 1px solid rgba(128, 128, 128, 0.199);
  margin: 10px auto;
}
.zhuce {
  color: grey;
  margin-left: 20px;
  font-size: 24px;
  margin-top: 40px;
}
p {
  color: rgba(128, 128, 128, 0.808);
  margin-left: 20px;
  font-size: 14px;
}
</style>